<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>注册 - 奢享时光</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-gradient: linear-gradient(135deg, #7F00FF, #E100FF);
      --secondary-gradient: linear-gradient(135deg, #00F5A0, #00D9F5);
      --primary-color: #7F00FF;
      --secondary-color: #00F5A0;
      --accent-color: #FFE600;
      --dark-bg: #2D1B69;
      --light-bg: #6B3FA0;
      --text-light: #FFFFFF;
      --text-secondary: #E0D5FF;
      --card-bg: rgba(255, 255, 255, 0.1);
      --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      --border-radius: 16px;
      --border: 1px solid rgba(255, 255, 255, 0.18);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: 'Noto Sans SC', 'Poppins', sans-serif;
      background: var(--dark-bg);
      color: var(--text-light);
      font-size: 14px;
      line-height: 1.5;
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      outline: none;
    }

    .app-container {
      max-width: 480px;
      margin: 0 auto;
      min-height: 100vh;
      background: linear-gradient(180deg, var(--dark-bg), var(--light-bg));
      position: relative;
      overflow: hidden;
      padding-bottom: 30px;
      display: flex;
      flex-direction: column;
    }

    /* 背景装饰 */
    .bg-decoration {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .bg-circle {
      position: absolute;
      border-radius: 50%;
    }

    .bg-circle:nth-child(1) {
      width: 300px;
      height: 300px;
      top: -150px;
      right: -100px;
      background: radial-gradient(circle, rgba(225, 0, 255, 0.2), rgba(225, 0, 255, 0));
    }

    .bg-circle:nth-child(2) {
      width: 250px;
      height: 250px;
      bottom: 10%;
      left: -100px;
      background: radial-gradient(circle, rgba(0, 245, 160, 0.15), rgba(0, 245, 160, 0));
    }

    /* 顶部导航 */
    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(45, 27, 105, 0.8);
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: var(--border);
    }

    .back-button {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .page-title {
      font-size: 18px;
      font-weight: 600;
    }

    .header-actions {
      width: 36px;
      height: 36px;
    }

    /* 内容区域 */
    .content {
      position: relative;
      z-index: 1;
      padding: 20px;
      flex: 1;
    }

    /* Logo */
    .logo-container {
      text-align: center;
      margin: 30px 0;
    }

    .app-logo {
      width: 100px;
      height: 100px;
      background: var(--primary-gradient);
      border-radius: 20px;
      box-shadow: 0 8px 24px rgba(127, 0, 255, 0.3);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      font-weight: 600;
      letter-spacing: -2px;
      color: white;
      position: relative;
      overflow: hidden;
    }

    .app-logo::after {
      content: '';
      position: absolute;
      width: 150%;
      height: 40px;
      background: rgba(255, 255, 255, 0.2);
      transform: rotate(45deg);
      top: 40px;
      left: -40px;
    }

    .app-name {
      font-size: 24px;
      font-weight: 600;
      margin-top: 16px;
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .app-slogan {
      font-size: 14px;
      color: var(--text-secondary);
      margin-top: 8px;
    }

    /* 表单区域 */
    .form-container {
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--border-radius);
      border: var(--border);
      padding: 20px;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      margin-bottom: 20px;
    }

    .form-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
      text-align: center;
    }

    .form-group {
      margin-bottom: 16px;
      position: relative;
    }

    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .form-control {
      width: 100%;
      height: 50px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 0 16px;
      font-size: 16px;
      color: var(--text-light);
      font-family: inherit;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      border-color: var(--primary-color);
      background: rgba(255, 255, 255, 0.12);
      outline: none;
    }

    .form-control::placeholder {
      color: rgba(255, 255, 255, 0.4);
    }

    .send-code-btn {
      position: absolute;
      right: 8px;
      top: 37px;
      height: 34px;
      background: var(--secondary-gradient);
      border-radius: 8px;
      color: var(--dark-bg);
      font-weight: 600;
      font-size: 12px;
      padding: 0 12px;
      line-height: 34px;
    }

    .send-code-btn:active {
      opacity: 0.8;
    }

    .button-primary {
      width: 100%;
      height: 54px;
      background: var(--primary-gradient);
      border-radius: 12px;
      color: var(--text-light);
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      box-shadow: 0 8px 16px rgba(127, 0, 255, 0.3);
      transition: all 0.3s ease;
    }

    .button-primary:active {
      transform: translateY(2px);
      box-shadow: 0 4px 8px rgba(127, 0, 255, 0.3);
    }

    .form-footer {
      text-align: center;
      margin-top: 24px;
      color: var(--text-secondary);
    }

    .form-link {
      color: var(--accent-color);
      font-weight: 500;
    }

    .agreement-box {
      display: flex;
      align-items: flex-start;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .agreement-checkbox {
      width: 18px;
      height: 18px;
      margin-right: 10px;
      margin-top: 1px;
      appearance: none;
      -webkit-appearance: none;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      position: relative;
      cursor: pointer;
    }

    .agreement-checkbox:checked {
      background: var(--primary-color);
      border-color: var(--primary-color);
    }

    .agreement-checkbox:checked::after {
      content: '✓';
      position: absolute;
      color: white;
      font-size: 12px;
      left: 4px;
      top: 0px;
    }

    .agreement-text {
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-secondary);
    }

    .form-error {
      color: #FF6B6B;
      font-size: 12px;
      margin-top: 4px;
      display: none;
    }

    /* 底部装饰图 */
    .bottom-decoration {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: -1;
      opacity: 0.6;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="bg-circle"></div>
      <div class="bg-circle"></div>
    </div>

    <!-- 顶部导航 -->
    <header class="header">
      <a href="javascript:history.back()" class="back-button">
        <i class="fas fa-arrow-left"></i>
      </a>
      <div class="page-title">注册账号</div>
      <div class="header-actions"></div>
    </header>

    <!-- 主要内容 -->
    <main class="content">
      <!-- Logo 区域 -->
      <div class="logo-container">
        <div class="app-logo">
          <span>SX</span>
        </div>
        <div class="app-name">奢享时光</div>
        <div class="app-slogan">尊享高品质拼团体验</div>
      </div>

      <!-- 注册表单 -->
      <div class="form-container">
        <h2 class="form-title">欢迎加入奢享时光</h2>
        <form id="registerForm">
          <div class="form-group">
            <label for="phone" class="form-label">手机号码</label>
            <input type="tel" id="phone" class="form-control" placeholder="请输入手机号码" maxlength="11">
            <div class="form-error" id="phoneError">请输入正确的手机号码</div>
          </div>

          <div class="form-group">
            <label for="verificationCode" class="form-label">验证码</label>
            <input type="text" id="verificationCode" class="form-control" placeholder="请输入验证码" maxlength="6">
            <button type="button" class="send-code-btn" id="sendCodeBtn">发送验证码</button>
            <div class="form-error" id="codeError">请输入正确的验证码</div>
          </div>

          <div class="form-group">
            <label for="password" class="form-label">设置密码</label>
            <input type="password" id="password" class="form-control" placeholder="请设置6-20位登录密码">
            <div class="form-error" id="passwordError">密码长度需为6-20位</div>
          </div>

          <div class="form-group">
            <label for="confirmPassword" class="form-label">确认密码</label>
            <input type="password" id="confirmPassword" class="form-control" placeholder="请再次输入密码">
            <div class="form-error" id="confirmError">两次输入的密码不一致</div>
          </div>

          <div class="agreement-box">
            <input type="checkbox" id="agreementCheck" class="agreement-checkbox">
            <label for="agreementCheck" class="agreement-text">
              我已阅读并同意<a href="agreement.html" class="form-link">《用户协议》</a>和<a href="privacy.html" class="form-link">《隐私政策》</a>
            </label>
          </div>

          <button type="button" id="registerBtn" class="button-primary">立即注册</button>
        </form>

        <div class="form-footer">
          已有账号？<a href="login.html" class="form-link">立即登录</a>
        </div>
      </div>
    </main>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取表单元素
      const phoneInput = document.getElementById('phone');
      const verificationInput = document.getElementById('verificationCode');
      const passwordInput = document.getElementById('password');
      const confirmInput = document.getElementById('confirmPassword');
      const agreementCheck = document.getElementById('agreementCheck');
      const sendCodeBtn = document.getElementById('sendCodeBtn');
      const registerBtn = document.getElementById('registerBtn');
      
      // 错误提示元素
      const phoneError = document.getElementById('phoneError');
      const codeError = document.getElementById('codeError');
      const passwordError = document.getElementById('passwordError');
      const confirmError = document.getElementById('confirmError');
      
      // 验证手机号格式
      function isValidPhone(phone) {
        return /^1[3-9]\d{9}$/.test(phone);
      }
      
      // 验证验证码格式
      function isValidCode(code) {
        return /^\d{6}$/.test(code);
      }
      
      // 验证密码格式
      function isValidPassword(password) {
        return password.length >= 6 && password.length <= 20;
      }
      
      // 发送验证码
      let countdown = 0;
      let timer = null;
      
      sendCodeBtn.addEventListener('click', function() {
        if (countdown > 0) return;
        
        const phone = phoneInput.value.trim();
        if (!isValidPhone(phone)) {
          phoneError.style.display = 'block';
          return;
        } else {
          phoneError.style.display = 'none';
        }
        
        // 模拟发送验证码
        countdown = 60;
        updateSendCodeBtn();
        
        timer = setInterval(() => {
          countdown--;
          updateSendCodeBtn();
          
          if (countdown <= 0) {
            clearInterval(timer);
          }
        }, 1000);
        
        // 这里可以添加实际发送验证码的AJAX请求
        console.log('发送验证码到：' + phone);
      });
      
      function updateSendCodeBtn() {
        if (countdown > 0) {
          sendCodeBtn.innerText = `${countdown}秒后重发`;
          sendCodeBtn.style.opacity = '0.6';
        } else {
          sendCodeBtn.innerText = '发送验证码';
          sendCodeBtn.style.opacity = '1';
        }
      }
      
      // 注册按钮点击
      registerBtn.addEventListener('click', function() {
        let isValid = true;
        
        // 验证手机号
        const phone = phoneInput.value.trim();
        if (!isValidPhone(phone)) {
          phoneError.style.display = 'block';
          isValid = false;
        } else {
          phoneError.style.display = 'none';
        }
        
        // 验证验证码
        const code = verificationInput.value.trim();
        if (!isValidCode(code)) {
          codeError.style.display = 'block';
          isValid = false;
        } else {
          codeError.style.display = 'none';
        }
        
        // 验证密码
        const password = passwordInput.value;
        if (!isValidPassword(password)) {
          passwordError.style.display = 'block';
          isValid = false;
        } else {
          passwordError.style.display = 'none';
        }
        
        // 验证确认密码
        const confirmPassword = confirmInput.value;
        if (password !== confirmPassword) {
          confirmError.style.display = 'block';
          isValid = false;
        } else {
          confirmError.style.display = 'none';
        }
        
        // 验证用户协议
        if (!agreementCheck.checked) {
          alert('请阅读并同意用户协议和隐私政策');
          isValid = false;
        }
        
        if (isValid) {
          // 实际项目中这里应该发送AJAX请求进行注册
          console.log('注册信息：', {
            phone,
            code,
            password
          });
          
          // 模拟注册成功，跳转到登录页
          alert('注册成功！');
          window.location.href = 'login.html';
        }
      });
      
      // 输入框焦点事件
      const inputs = document.querySelectorAll('.form-control');
      inputs.forEach(input => {
        input.addEventListener('focus', function() {
          this.parentNode.querySelector('.form-error').style.display = 'none';
        });
      });
    });
  </script>
</body>
</html> 